<!-- 服务项目 -->
<template>
	<view>
		<view class="service-items-page">
			<block v-for="(i, j) in serviceList" :key="j">
				<view class="flex-between service-cls">
					<view>{{ i.classificationName }}</view>
					<checkbox-group @change="event=>checkeBox(event,i.id)">
						<label class="sunui-chekcbox-label">
							<checkbox :checked="i.checked"></checkbox>
						</label>
					</checkbox-group>
				</view>
			</block>
			<view class="fixed-bj flex" @click="saveCategory()">
				<view class="confirm-btn flex">确认并提交</view>
			</view>
		</view>
		<sunui-popup ref="pop">
			<template v-slot:content>
				<view>
					<block v-if="packageList.length">
						<view class="provide-project flex-align-center" v-for="(item, j) in packageList" :key="j">
							<image :src="item.rotationChart"></image>
							<view class="remaining-width m-left20">
								<view class="font32 color333">{{item.tradeName}}</view>
								<view class="font-overflow color999 p-align-top10">
								</view>
								<view class="flex-align-center">

									<view class="bj-time golden  flex-align-center">
										<text class="font24 iconfont icon-shijian m-right10"></text>
										<view class="font24 m-bottom4">{{item.serviceTime}}分钟</view>
									</view>
								</view>
								<view class="flex-between p-top20">
									<view class="flex-align-center">
										<text class="font36 red">￥{{item.plusClockPrice}}</text>
										<view class="font24 color999 text-decoration ">￥{{item.originalServicePrice}}
										</view>
									</view>

								</view>
								<view>

								</view>

							</view>
							<checkbox-group @change="event=>checkeBoxPackage(event,item.id,j)">
								<label class="sunui-chekcbox-label">
									<checkbox :checked="item.checked"></checkbox>
								</label>
							</checkbox-group>
						</view>
					</block>
					<view class="noPackageList flex-align-center" v-if="!packageList.length">
						该分类暂时无套餐
					</view>
					<view class="fixed-set-btn flex-align-center">
						<view class="cancel-btn flex" @click="cancelClose(currentCategoriesId)">取消</view>
						<view v-if="packageList.length" class="save-btn flex" @click="saveClose()">保存设置</view>
					</view>
<<<<<<< HEAD

=======
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
<<<<<<< HEAD
=======
	import {

		mapMutations
	} from 'vuex'
	import {
		mapState
	} from 'vuex'
	import {
		mapGetters
	} from 'vuex'
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
	export default {
		data() {
			return {
				siteId: '', // 站点id
				serviceList: [],
				serviceList2: [{
						name: '中式推拿'
					},
					{
						name: '泰试推拿'
					},
					{
						name: '精油SPA'
					}
				],
				categoriesArr: [],
				packageList: [],
				currentCategoriesId: '',
<<<<<<< HEAD
				packageArr: []
=======
				packageArr: [],
				// 基本认证表单
				basicInformationForm: {

				},
				// 类目选中的
				selectServiceList: [],
				// 套餐选中的
				selectPackageList: [],
				statusId:''
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e

			};
		},
		onShow() {
<<<<<<< HEAD
			this.getServiceCategories();
			// 根据站点域名查询站点id
			// this.getSiteDomainID()

		},
		methods: {
=======

			this.getServiceCategories()
			// 据技师id查询选择的类目
			this.getByTechnicianCategory()

		},
		computed: {

			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('user', ['basicAuthenticationForm', 'uploadQualificationForm', 'uploadHealthCertificateForm',
				'uploadAvatarForm', 'identityAuthenticationForm','technicianDetails'
			]),

		},
		methods: {
			...mapMutations('user', ['uploadProgress', 'uploadTaskCenter']),

			// 根据站点id查询类目 （可共用）
			async getServiceCategories() {
				const result = await this.$http.get({
					url: this.$api.getByServiceCategoriesSiteId,
					data: {
						siteId: uni.getStorageSync('siteId') // 站点id
						// siteId: this.siteId // 站点id
					}
				});
				if (result.code == 200) {
					console.log('查询类目result.', result);
					this.serviceList = result.data;
					this.serviceList.forEach((item) => {
						this.$set(item, 'checked', false);
					})
				} else {
					this.$sun.toast(result.message)
				}
			},
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
			//点击单个复选框
			async checkeBox(e, id) {
				console.log(e, id)

				this.currentCategoriesId = id

<<<<<<< HEAD
			

=======
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
				if (e.detail.value[0] == '') {
					this.serviceList.find(p => {
						if (id == p.id) {
							// 如果单个id对应相等，且checked存在，p.checked:true/存在那么false,否则为true
							p.checked ? (p.checked = false) : (p.checked = true);
							// this.$set(p, 'isCheckBox', true);
<<<<<<< HEAD
					
							this.categoriesArr.push({
								technicianId: 1,
=======

							this.categoriesArr.push({
								technicianId: uni.getStorageSync('technicianId'),
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
								categoriesId: id
							})
						}
					});
					console.log(this.categoriesArr)
					const result = await this.$http.get({
						url: this.$api.queryPackage,
						data: {
							serviceCategoriesId: id // 站点域名(传值将https截取)
						}
					});
					console.log(result)
					if (result.code == 200) {
<<<<<<< HEAD
=======


>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
						this.packageList = result.data;
						this.packageList.forEach((item) => {
							this.$set(item, 'checked', false);
						})
						console.log(result)

<<<<<<< HEAD

						this.$refs.pop.show({

=======
						// 如果有缓存走缓存

						if (uni.getStorageSync('savePackage')) {
							this.selectPackageList = (uni.getStorageSync('savePackage'))
							console.log(this.selectPackageList)
							this.packageArr = []
							this.selectPackageList.forEach((i) => {
								const res = this.packageList.find((item) => {
									return item.id == i.packageId
								})
								console.log(res)
								if (res) {
									this.packageArr.push({
										technicianId:  uni.getStorageSync('technicianId'),
										packageId: i.packageId,
										categoriesId: i.categoriesId
									})
								}
								if (res) {
									res.checked = true
								}
							})

						} else {
							const res = await this.$http.get({
								url: this.$api.getSelectClassificationQueryPackage,
								data: {
									// siteId: uni.getStorageSync('siteId'), // 站点id
									// serviceCategoriesId: id
									technicianId: uni.getStorageSync('technicianId')
								}
							});
							if (res.code == 200) {
								this.selectPackageList = res.data
								this.packageArr = []
								console.log(this.packageList)
								this.selectPackageList.forEach((i) => {
									const res = this.packageList.find((item) => {
										return item.id == i.id
									})
									console.log(res)
									if (res) {
										this.packageArr.push({
											technicianId: uni.getStorageSync('technicianId'),
											packageId: i.id,
											categoriesId: i.serviceCategoriesId
										})
									}
									if (res) {
										res.checked = true
									}
								})
							}
						}
						this.$refs.pop.show({
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
							anim: 'bottom',
							position: 'bottom',
							shadeClose: false, //false使用户不能点击其它关闭页面
							topclose: false,
							/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
							titleStyle: 'position: fixed;width: 100%;background: #fff;z-index: 999;border-bottom:1rpx solid #f7f7f7;'
						});


					} else {
						this.$sun.toast(result.message)


					}
				} else {
<<<<<<< HEAD
				const index = this.categoriesArr.findIndex(item => {
					return item.id == id
				})
				
				this.categoriesArr.splice(index, 1)
				console.log(this.categoriesArr)
				}



			},
			saveClose() {
				console.log(this.serviceList)
                if(this.packageArr.length){
					this.$refs.pop.close();
					this.savePackage()
				}else{
					this.$sun.toast('请选择一个套餐')
				}

				
=======
					this.serviceList.find(p => {
						if (id == p.id) {
							console.log('匹配')
							console.log(p.checked)
							// 如果单个id对应相等，且checked存在，p.checked:true/存在那么false,否则为true
							p.checked = true;
							// this.$set(p, 'isCheckBox', true);

						}
					});
					console.log(this.serviceList)
					this.packageArr = []

					const result = await this.$http.get({
						url: this.$api.queryPackage,
						data: {
							serviceCategoriesId: id // 站点域名(传值将https截取)
						}
					});
					console.log(result)
					if (result.code == 200) {
						this.packageList = result.data;
						this.packageList.forEach((item) => {
							this.$set(item, 'checked', false);
						})

						if (uni.getStorageSync('savePackage')) {
							this.selectPackageList = (uni.getStorageSync('savePackage'))
							this.packageArr = []
							this.selectPackageList.forEach((i) => {
								const res = this.packageList.find((item) => {
									return item.id == i.packageId
								})
								console.log(res)
								if (res) {
									this.packageArr.push({
										technicianId:  uni.getStorageSync('technicianId'),
										packageId: i.packageId,
										categoriesId: i.categoriesId
									})
								}
								if (res) {
									res.checked = true
								}
							})
						} else {
							// 这里应该是 查询改目录下的套餐
							const res = await this.$http.get({
								url: this.$api.getSelectClassificationQueryPackage,
								data: {
									// siteId: uni.getStorageSync('siteId'), // 站点id
									// serviceCategoriesId: id
									technicianId:  uni.getStorageSync('technicianId')
								}
							});
							if (res.code == 200) {
								this.selectPackageList = res.data

								this.selectPackageList.forEach((i) => {
									const res = this.packageList.find((item) => {
										return item.id == i.id
									})
									console.log(res)
									if (res) {
										this.packageArr.push({
											technicianId:  uni.getStorageSync('technicianId'),
											packageId: i.id,
											categoriesId: i.serviceCategoriesId
										})
									}
									if (res) {

										res.checked = true
									}
								})
							}
						}

					}
					this.$refs.pop.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: false, //false使用户不能点击其它关闭页面
						topclose: false,
						/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
						titleStyle: 'position: fixed;width: 100%;background: #fff;z-index: 999;border-bottom:1rpx solid #f7f7f7;'
					});
				}
			},
			saveClose() {
				// 先判断是否有一样的进行去重


				if (this.packageArr.length) {
					this.$refs.pop.close();
					// 保存缓存 只有后面提交的时间才提交并且清除缓存 如果查询的时候先查有没有缓存 如果有缓存就用缓存的没有就用查询的
					console.log(this.packageArr)
					console.log(uni.getStorageSync('savePackage'))
					const arr = ((uni.getStorageSync('savePackage')) ? (uni.getStorageSync('savePackage')) : []).concat(
						this.packageArr)
					console.log(arr)
					uni.setStorageSync('savePackage', arr)

					// this.savePackage()
				} else {
					this.$sun.toast('请选择一个套餐')
				}


>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
			},
			cancelClose(id) {
				this.serviceList.find(p => {
					if (id == p.id) {
						// 如果单个id对应相等，且checked存在，p.checked:true/存在那么false,否则为true
						if (p.checked) {
							this.$set(p, 'checked', false);
						}
<<<<<<< HEAD

					}

				});
			
=======
					}

				});

>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
				const index = this.categoriesArr.findIndex(item => {
					return item.id == id
				})

				this.categoriesArr.splice(index, 1)
				console.log(this.categoriesArr)
				this.$refs.pop.close();
			},
<<<<<<< HEAD
			// 根据站点域名查询站点id
			async getSiteDomainID() {
				const result = await this.$http.get({
					url: this.$api.getSiteDomainName,
					data: {
						siteDomainName: 'test.smam.com' // 站点域名(传值将https截取)
					}
				});
				if (result.code == 200) {
					this.siteId = result.data.id;
					console.log('根据站点域名查询站点result.', result);
					z;
=======


			async getByTechnicianCategory() {
				var selectList = []
				const result = await this.$http.get({
					url: this.$api.getByTechnicianCategory,
					data: {
						technicianId: uni.getStorageSync('technicianId'), // 站点id
						siteId: uni.getStorageSync('siteId') // 站点id
					}
				});
				if (result.code == 200) {
					console.log('查询类目result.', result);
					this.selectServiceList = result.data
					// 这个是 查询出来已经选择的目录
					this.selectServiceList.forEach((i) => {
						const res = this.serviceList.find((item) => {
							return item.id == i.id
						})

						if (res) {
							this.categoriesArr.push({
								technicianId:  uni.getStorageSync('technicianId'),
								categoriesId: i.id
							})
						}

						if (res) {
							res.checked = true
						}
					})
					// 这个是所有的目录 然后二个进行比较 选出查询出来的目录
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
				} else {
					this.$sun.toast(result.message)
				}
			},
<<<<<<< HEAD
			// 根据站点id查询类目 （可共用）
			// async getServiceCategories() {
			// 	const result = await this.$http.get({
			// 		url: this.$api.getByServiceCategoriesSiteId,
			// 		data: {
			// 			siteId: uni.getStorageSync('siteId') // 站点id
			// 			// siteId: this.siteId // 站点id
			// 		}
			// 	});
			// 	if (result.code == 200) {
			// 		console.log('查询类目result.', result);
			// 		this.serviceList = result.data;
			// 		this.serviceList.forEach((item) => {
			// 			this.$set(item, 'checked', false);
			// 		})
			// 	} else {
			// 		this.$sun.toast(result.message)
			// 	}
			// }, 
            async getServiceCategories() {
            	const result = await this.$http.get({
            		url: this.$api.getByTechnicianCategory,
            		data: {
            			technicianId: '1' // 站点id
            			// siteId: this.siteId // 站点id
            		}
            	});
            	if (result.code == 200) {
            		console.log('查询类目result.', result);
            		this.serviceList = result.data;
            		this.serviceList.forEach((item) => {
            			this.$set(item, 'checked', false);
            		})
            	} else {
            		this.$sun.toast(result.message)
            	}
            },
			// 保存选择的类目

			async saveCategory() {

				const result = await this.$http.post({
					url: this.$api.saveTechnicianSelectionCategory,
					data: this.categoriesArr
				});
				this.categoriesArr = []
				if (result.code == 200) {
					console.log('查询类目result.', result);

				} else {
					this.$sun.toast(result.message)
				}
			},
			checkeBoxPackage(event, id, i) {

				if (event.detail.value[0] == '') {
					this.packageList.find(p => {
						if (id == p.id) {
							// 如果单个id对应相等，且checked存在，p.checked:true/存在那么false,否则为true
							p.checked ? (p.checked = false) : (p.checked = true);
							// this.$set(p, 'isCheckBox', true);

							this.packageArr.push({
								technicianId: 1,
								packageId: id,
								categoriesId: this.currentCategoriesId
							})
						}
					});
				} else {
					const index = this.packageArr.findIndex(item => {
						return item.id == id
					})

					this.packageArr.splice(index, 1)
					console.log(this.packageArr)


				}

			},

			// 保存该套餐
			async savePackage(id) {
				const result = await this.$http.post({
					url: this.$api.savePackage,
					data: this.packageArr
=======
			// 保存选择的类目

			async saveCategory() {
				if(this.technicianDetails.authenticationNot==3){
					const res = await this.$http.put({
						url: this.$api.technicianModifyIphone,
						data: {
							id: uni.getStorageSync('technicianId'),
						    userId:uni.getStorageSync('userId'),
							siteId:uni.getStorageSync('siteId'),
							authenticationNot: 3,
						}
					});
				}else{
					const res = await this.$http.put({
						url: this.$api.technicianModifyIphone,
						data: {
							id: uni.getStorageSync('technicianId'),
						    userId:uni.getStorageSync('userId'),
							siteId:uni.getStorageSync('siteId'),
							authenticationNot: 2,
						}
					});
				}
				if (this.categoriesArr.length) {
					
					const uniqueArray = Array.from(new Set(this.categoriesArr.map(JSON
						.stringify))).map(JSON
						.parse);
						console.log(uniqueArray)
					const result = await this.$http.post({
						url: this.$api.saveTechnicianSelectionCategory,
						data: uniqueArray
					});
					this.categoriesArr = []
					this.uploadTaskCenter({
						status: true,
						name: 'serviceItemsEnd'
					})

					if (result.code == 200) {
						console.log('查询类目result.', result);
						this.$sun.navSwitch()('/pages/my/my');

					} else {
						this.$sun.toast(result.message)
					}

					this.savePackage()
                     uni.setStorageSync('savePackage',[])
				} else {
					this.$sun.toast('请选择一个类目')
				}
			},
			checkeBoxPackage(event, id, i) {
				if (event.detail.value[0] == '') {
				
					this.$at.uniDoFunc({
						// 键名
						key: 'submit',
						success: async () => {
							//锁定
							this.$at.lockKey('submit');
							this.packageList.find(p => {
								if (id == p.id) {
									// 如果单个id对应相等，且checked存在，p.checked:true/存在那么false,否则为true
									p.checked ? (p.checked = false) : (p.checked = true);
									// this.$set(p, 'isCheckBox', true);

									this.packageArr.push({
										technicianId:  uni.getStorageSync('technicianId'),
										packageId: id,
										categoriesId: this.currentCategoriesId
									})
									console.log(this.packageArr)
								
									
								}
							});
						}
					});
					if(id==this.statusId){
						console.log('相同')
					}else{
						console.log('不相同')
						this.$at.releaseKey('submit');
						this.statusId=id
					}

				} else {
				
							
							const index = this.packageArr.findIndex(item => {
								return item.id == id
							})
							
							this.packageArr.splice(index, 1)
								this.$at.releaseKey('submit');
							console.log(this.packageArr)
						
							// 
				}

			},
			// 保存该套餐
			async savePackage(id) {
				// this.uploadProgress({
				// 	status: true,
				// 	name: 'serviceItemsEnd'
				// })
			
				
				
				const uniqueArray = Array.from(new Set(uni.getStorageSync('savePackage').map(JSON
					.stringify))).map(JSON
					.parse);
					
					console.log(uniqueArray)
				const result = await this.$http.post({
					url: this.$api.savePackage,
					data: uniqueArray
					// data:this.packageArr
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
				});

				if (result.code == 200) {
					console.log('查询类目result.', result);
<<<<<<< HEAD
=======
					uni.setStorageSync('savePackage', [])
					console.log(this.packageArr)
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
					this.packageArr = []
				} else {
					this.$sun.toast(result.message)
				}
			}
<<<<<<< HEAD
			// // 根据类目查询 套餐
			// async queryPackageFn(id) {
			// 	const result = await this.$http.get({
			// 		url: this.$api.queryPackage,
			// 		data:{
			// 			serviceCategoriesId:id
			// 		}
			// 	});
			// 	if (result.code == 200) {
			// 		console.log('查询类目result.', result);

			// 	} else {
			// 		this.$sun.toast(result.message)
			// 	}
			// }

=======
		
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
		}
	};
</script>

<style lang="less">
	/* 未选中的 背景样式 */
	checkbox .wx-checkbox-input {
		width: 40rpx;
		/* 背景的宽 */
		height: 40rpx;
		/* 背景的高 */
	}

	/* 选中后的 背景样式*/
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 1rpx solid #26c278;
		background: #26c278;
	}

	/* 选中后的 对勾样式 */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 34rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 34rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 34rpx;
		text-align: center;
		font-size: 24rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	.noPackageList {
		color: #000;
		background-color: #fff;
		height: 200rpx;

	}

	.provide-project {
		border-top: 2rpx solid #f4f4f4;
		background-color: #fff;
		padding: 20rpx 0;

		image {
			width: 192rpx;
			height: 192rpx;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}

		// 右侧剩余宽度
		.remaining-width {
			width: calc(100% - 198rpx);

			button {
				border-radius: 76rpx;
				background-color: #19c866;
				color: #fff;
				width: 150rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-size: 28rpx;
				padding: 0rpx;
				margin: 0rpx;
			}

			.reservation-border {
				border: 2rpx solid #FF7B15;

				.reservation-img {
					width: 32rpx;
					height: 32rpx;
					background-color: #FF7B15;

					image {
						height: 30rpx;
					}
				}

				.reservation-text {
					margin: 0 10rpx;
					color: #EC724C;
					font-size: 24rpx;

				}
			}

			.bj-time {
				padding: 2rpx 16rpx 2rpx 6rpx;
				border-radius: 12rpx;
				background: linear-gradient(92deg, #3A2800 4.83%, #563600 96.02%);

				.m-bottom4 {
					margin-bottom: 4rpx;
				}
			}
		}
	}

	.fixed-set-btn {
		height: 116rpx;
		line-height: 116rpx;

		.checkbox-width {
			flex: 1;

			view {
				font-size: 32rpx;
				color: #1890ff;
				margin-left: 20rpx;
			}
		}

		.cancel-btn {
			flex: 1;
			background: #fff;
			color: #1890ff;
			font-size: 32rpx;
		}

		.save-btn {
			width: 50%;
			background: #1890ff;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.service-items-page {
		padding-bottom: 200rpx;

		.service-cls {
			color: #383838;
			font-size: 32rpx;
			padding: 30rpx;
			border-top: 2rpx solid #ededed;
		}

		.fixed-bj {
			z-index: 9;
			width: 100%;
			height: 200rpx;
			position: fixed;
			bottom: 0;
			left: 0;
		}

		.confirm-btn {
			color: #fff;
			font-size: 36rpx;
			border-radius: 20rpx;
			background: #1890ff;
			width: 664rpx;
			height: 100rpx;
		}
	}

	.reservation-img {
		width: 178rpx !important;
		height: 178rpx !important;
	}
</style>